<template>
	<view class="news">
		<!--  #ifdef APP-PLUS || MP-WEIXIN -->
			<view class="status_bar">
				 <!-- 这里是状态栏 -->
			</view>
		<!--  #endif -->
		<view class="head" >
			<view class="top ">
				<image @click="back" class="chat" src="../../../static/icons/arr-l.png" mode="widthFix" ></image>
				<view class="texts">{{title}}</view>
				<view class="right"></view>
			</view>
			<v-tabs
			  @change = "select(activeTab)"
			  class="tab"
			  :tabs="['新品','销量','价格','筛选']"
			  height="100rpx"
			  v-model="activeTab"
			  color="#FFFFFF"
			  activeColor="#1abc9c"
			  fontSize="30rpx"
			  activeFontSize="30rpx"
			  lineHeight="4rpx"
			  :lineScale="1"
			  lineColor="#FFFFFF"
			/>
		</view>
		<view class="contents">
				<navigator :class="page.lastPage?'lastOne':''" open-type="navigate" :url="`/pages/sort/detail/detail?productId=${item.id}`" class="small" v-for="(item,index) in productList" :key="index">
					<image :src="item.cover_img" mode="widthFix"></image>
					<view class="ctitl">
						<text>{{item.gname}}</text>
						<text>{{item.descr}}</text>
					</view>
					<view class="bot">
						<text>¥{{item.price_now}}</text>
						<text>{{item.origin_city}}</text>
					</view>
				</navigator>
		</view>
		<uni-load-more @clickLoadMore="addMore"  :status="more"></uni-load-more>
	</view>
	
</template>

<script>
	import vTabs from '../../../components/v-tabs/v-tabs.vue'
	import {productList} from "../../../utils/sort/index.js"
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
	export default{
		data(){
			return{
				kindId:"",
				title:"",
				productList:[],
				page:{
					start:1,
					limit:10,
					lastPage:false
				},
				isFresh:false,
				activeTab:0,
				more: "more"
			}
		},
		components: {
			vTabs,uniLoadMore
		 },
		 onReachBottom(){
			 // this.isFresh = true
		 	if(!this.page.lastPage){
		 		this.page.start++
		 		this.init()
		 	}else{
		 		this.more = "noMore"
		 	}
		 },
		onLoad(option){
			this.kindId = option.kindId
			this.init()
		},
		onPullDownRefresh() {
			this.isFresh = true
			if(!this.page.lastPage){
				this.init()
			}
			uni.stopPullDownRefresh();
			uni.showToast({
			    title: '加载成功！',
			    duration: 1000,
				icon:'none'
			});
		},
		methods:{
			back(){
				uni.switchTab({
					url:'/pages/sort/sort'
				})
			},
			select(val){
				console.log(val) 
				// this.activeTab = 
			},
			init(){
				uni.showLoading({
				    title: '加载中...',
					mask: true
				})
				productList({
					kindId:this.kindId,
					start:this.page.start,
					limit:this.page.limit
				})
				.then(res=>{
					// console.log(res)
					const data = res.data.data;
					uni.hideLoading();
					if(this.isFresh){
						this.productList = data.list
						this.isFresh = false
					}else{
						this.productList = this.productList.concat(data.list) 
					}
					this.title = res.data.kind.ctitle
					this.page.lastPage = data.lastPage
					this.$store.commit('push', this.productList)
					if(data.lastPage){
						this.more = "noMore"
						if(this.isFresh){
							this.isFresh = false
							this.productList = this.$store.state.productList
						}
					}
					uni.stopPullDownRefresh();
					// console.log(this.$store.state.productList)
				})
			},
		}
	}
</script>


<style lang="scss" scoped>
.status_bar {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 80!important;
	color: #FFFFFF;
	height: var(--status-bar-height);
	height: 60rpx;
	width: 100%;
	background-color: #354E44;
}
body,html{
	overflow: hidden;
}
.news{
	width: 100%;
	height: 100%;
	background-color: #F1ECE7;
	overflow: hidden;
	position: relative;
	z-index: 10;
}

.top{
	position: fixed;
	left: 0;
	top: 0;
	/*  #ifdef APP-PLUS || MP-WEIXIN */
	top:50rpx;
	/*  #endif  */
	width: calc(100% - 60rpx);
	padding: 10rpx 30rpx;
	height: 210rpx;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	z-index: 20;
	background-color: rgb(53, 78, 68);
	image{
		width: 36rpx;
		height: 36rpx;
		/*  #ifdef  MP-WEIXIN  */
		visibility: hidden;
		/*  #endif  */
	}
	
	.texts{
		letter-spacing: 6rpx!important;
		font-size: 34rpx;
		color: #FFFFFF;
		letter-spacing: 2.43rpx;
		margin-top: 15rpx;
	}
	.chat{
		width: 30rpx;
		height: 30rpx;
		margin-top: 15rpx;
	}
}

.tab{
	position: fixed;
	display: flex;
	justify-content: space-around;
	left: 0;
	top: 65rpx;
	width: 100%;
	/*  #ifdef  MP-WEIXIN */
	padding: 0 80rpx;
	/*  #endif  */
	/*  #ifdef APP-PLUS */
	top:120rpx;
	/*  #endif  */
	background-color: rgb(53, 78, 68);
	z-index: 20;
	.v-tabs__item{
		margin-right: 60rpx;
	}
}

.contents::before{
	position: fixed;
	left: 0;
	top: 170rpx;
	/*  #ifdef APP-PLUS */
	top:225rpx;
	/*  #endif  */
	content: "";
	width: 100%;
	height: 60rpx;
	background-color: #F1ECE7;
	border-radius: 40px 40px 0 0;
	z-index: 25;
}
.contents{
	width: calc(100% - 40rpx);
	margin: 240rpx auto 0;
	/*  #ifdef APP-PLUS || MP-WEIXIN */
	margin: 280rpx auto 0;
	/*  #endif  */
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	background-color: #F1ECE7;
	height: auto!important;
	.lastOne{
		margin-right: auto;
		margin-left: 20rpx;
	}
	.small{
		width: 316rpx;
		margin-bottom: 48rpx;
		background: #FFFFFF;
		box-shadow: 0 8px 16px 0 rgba(83,66,49,0.06);
		border-radius: 10px;
		.ctitl{
			margin: 28rpx 0 28rpx 36rpx ;
			text{
				display: block;
				font-size: 22rpx;
				color: #8D8D8D;
				letter-spacing: 1.57rpx;
			}
		}
		.ctitl text:first-child{
			font-size: 26rpx;
			color: #3E3E3E;
			letter-spacing: 1.86rpx;
			margin-bottom: 5rpx;
		}
		image{
			width: 100%;
			height: 238rpx;
		}
		.bot{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 15rpx;
			padding: 0 36rpx;
			text{
				text-align: right;
				width: 100rpx;
				font-size: 22rpx;
				color: #3E3E3E;
				letter-spacing: 1.57rpx;
			}
		}
		.bot text:first-child{
			text-align: left;
			font-size: 26rpx;
			color: #3E3E3E;
			letter-spacing: 1.86rpx;
			
		}
	}
}
</style>
